<template>
  <view>
    <view class="maintop main" :style="{ backgroundImage: 'url(' + bgimage + ')' }">
      <!--背景广告-->
      <view @tap="router">
        <view class="adurl">
          <text class="pro-tex" style="display: none">背景广告</text>
        </view>
      </view>

      <view class="names">
        <view class="gsname">{{ gongsiname || '员工之家' }} </view>

        <view class="brr">
          <image :src="avatarUrl" class="touxiang" v-if="session_id"></image>

          <image :src="nopic" class="touxiang" v-else></image>
        </view>

        <view v-if="session_id" class="brr">{{ nickname }} <image src="@assets/v.png" class="v"></image></view>

        <view v-else class="brr">游客</view>

        <view class="kefu2">欢迎光临大薪薪员工之家 </view>

        <!--  <view class="denglu"  v-if="{{session_id.length<1}}"><button bindgetuserinfo="getuserinfo" open-type="getUserInfo">点击登录</button></view>-->

        <view class="denglu" v-if="!session_id"><button @tap="login">登录</button></view>

        <view class="denglu" v-else><button @tap="loginout">退出</button></view>

        <view class="denglu" style="display: none"><button bindtap="ruzhi">入职</button></view>
      </view>

      <view class="note" v-for="(gonggao, index) in gonggao" :key="index"
        ><text>{{ gonggao.post_title }}</text>
      </view>
    </view>
    <!-- 九宫格 -->
    <view class="index-box">
      <view class="pro-fenle">
        <view v-for="(link, index) in links" :key="index">
          <view v-if="link.xcxtype == 'navigate'">
            <view @tap="SudokuRouter(link.url)" class="pro-box">
              <image :src="link.image" class="pro-yimg"></image>
              <text class="pro-tex">{{ link.name }}</text>
            </view>
          </view>

          <view v-else>
            <view class="pro-box" @tap="SudokuUrl(link.url)">
              <image :src="link.image" class="pro-yimg"></image>
              <text class="pro-tex">{{ link.name }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="index-swiper">
      <!-- <swiper class="swiper_box" :indicator-dots="indicatorDots" :vertical="vertical" :autoplay="autoplay">
        <view v-for="(pic, index) in pics" :key="index">
          <swiper-item class="swiper-item" @tap="SudokuUrl(pic.url)">
            <image :src="pic.image" class="slide-image" mode="widthFix" />
          </swiper-item>
        </view>
      </swiper> -->
      <view class="index-swiper">
        <ad unit-id="adunit-b162728fa0cbed65"></ad>
      </view>
    </view>

    <view class="kefu-box">
      <view class="kefu-btn" @tap="showRule">
        <image src="@assets/kf.png" class="kefu-img"></image>
      </view>
    </view>
    <!--客服弹层-->

    <!-- <view class="{ruleZhezhao， isRuleTrue?'isRuleShow':'isRuleHide'}"> -->
    <view :class="['ruleZhezhao，', isRuleTrue ? 'isRuleShow' : 'isRuleHide']">
      <view class="ruleZhezhaoContent">
        <view class="kfbg main" :style="{ backgroundImage: 'url(' + bgimage + ')' }">
          <view class="brr">
            <image :src="avatarUrl" class="touxiang" v-if="session_id"></image>

            <image :src="nopic" class="touxiang" v-else></image>
          </view>

          <view v-if="session_id" class="brr" style="color: #fff"
            >{{ nickname }} <image src="@assets/v.png" class="v"></image
          ></view>

          <vivew v-else class="brr" style="color: #fff">游客</vivew>
        </view>

        <view class="kefu"><text>客服：</text>{{ kefu || gongsikf }} </view>
        <view class="kefu"
          ><text>电话：</text>
          <text>{{ kefutel || gongsitel }}</text>
          <image src="@assets/tel.png" class="tel" @tap="to_dial" :data-index="kefutel || '0898-65368505'"></image
        ></view>
        <image src="@assets/kfclose.png" class="ruleHide" @tap="hideRule"></image>
      </view>
    </view>
  </view>
</template>

<script>
import Taro from '@tarojs/taro';
import { Current, getCurrentInstance } from '@tarojs/taro';
import { homeInfo, homeInfo1, satffInfo, Sudoku, carousel } from '@api/home';
export default {
  name: 'home',
  components: {},
  data() {
    //获取本地sessinid
    const sessionID = Taro.getStorageSync('session_id');
    return {
      urls: [
        {
          url: '/pages/set/index',
          name: '入职办理',
        },
        {
          url: '/pages/gongzi/index',
          name: '工资查询',
        },
        {
          url: '/pages/zm/index',
          name: '开具证明',
        },
        {
          url: '/pages/no/index',
          name: '内部推荐',
        },
      ],

      indicatorDots: true,
      vertical: false,
      autoplay: true,
      indicatorDots: true,
      autoplay: true,

      duration: 1000,
      nickname: '',
      pics: [],
      links: [],
      gonggao: [],
      session_id: sessionID,
      nickName: '',
      avatarUrl: '',
      nopic: '',
      // 头部背景图
      bgimage: '',

      //版权文字
      copys: '待君科技',

      //判断是否授权
      canIUse: '',
      bgadurl: '',
      // 客服
      kefu: '',
      kefutel: '',
      //扫码跳转公司id
      gsid: 0,
      gongsiname: '',
      gongsitel: '',
      gongsikf: '',
      isRuleTrue: false,
      gs_id: 0,
      jtid: 0, //集团id
      xydw: '',
      /*--markstart */
      customdata: [
        {
          type: 'url',
          name: '业务详情',
          value: '../details/hxyewu',
          opentype: 'navigate',
        },
      ],
    };
  },
  methods: {
    SudokuUrl(url) {
      Taro.navigateTo({
        url: `/pages/details/index?url=${url}`,
      });
    },
    router(e) {
      console.log(e);
      Taro.navigateTo({
        url: `/pages/details/index?url=${this.bgadurl}`,
      });
    },
    SudokuRouter(name) {
      // let url = this.urls.find((x) => x.name == name);
      // console.log(_acData)
      Taro.navigateTo({
        url: name,
      });
    },
    login(e) {
      e.stopPropagation();
      Taro.redirectTo({
        url: '/pages/login/index',
      });
    },
    //打开客服提示
    showRule() {
      this.isRuleTrue = true;
    },
    to_dial(t) {
      let a = t.currentTarget.dataset.index;
      Taro.makePhoneCall({
        phoneNumber: a,
      });
    },
    hideRule() {
      this.isRuleTrue = false;
    },
    loginout(e) {
      Taro.clearStorageSync();
      e.stopPropagation();
      this.session_id = '';
      Taro.showToast({
        title: '退出成功',
        icon: 'success',
        duration: 1000,
      });
      this.callApi(59);
    },
    callApi(gsid) {
      //获取员工信息
      satffInfo({ session_id: Taro.getStorageSync('session_id'), gsid: gsid }).then((res) => {
        console.log(res, '员工的消息.......................');
        const { xcxavatarurl, kefu, kefutel, nickname } = res.data;
        // this.realname = realname;
        this.avatarUrl = xcxavatarurl;
        this.kefu = kefu;
        this.kefutel = kefutel;
        this.nickname = nickname;
      });
      homeInfo1({ id: gsid }).then((res) => {
        console.log(res, '首页信息........................');
        const { company, logo, kefu, tel } = res.data;
        this.gongsiname = company;
        this.logo = logo;
        this.gongsikf = kefu;
        this.gongsitel = tel;
      });
    },
  },
  created() {
    const that = this;
    Taro.setBackgroundTextStyle({
      textStyle: 'dark',
    });
    var gsid = Taro.getStorageSync('gsid');
    let { smgsid, jtid, xydw } = Current.router.params;
    console.log(Current.router.params, '传过来的值');
    console.log(xydw, '传过来的中文值');
    let a = decodeURIComponent(xydw);
    this.xydw = a;
    if (typeof smgsid == 'undefined') {
      if (gsid.length == 0) {
        var gsid = 59;
      } else {
        //公司id写入缓存
        var gsid = gsid;
      }
    } else {
      var gsid = smgsid;
      //公司id写入缓存
      Taro.setStorageSync('gsid', gsid);
      Taro.setStorageSync('jtid', jtid);
    }
    Sudoku().then((res) => {
      console.log(res.data, '九宫格');
      let a = res.data;
      a.push({
        image: 'https://xxyg.daxinxin.vip/upload/default/20201102/e575232261948e164a198259fa737b85.png',
        name: '签署合同',
        url: '/pages/contract/index',
        xcxtype: 'navigate',
      });
      this.links = a;
    });
    carousel({ id: 1 }).then((res) => {
      this.pics = res.data;
    });
    homeInfo().then((res) => {
      const { wenhou, bgimage, nopic, bgadurl, copys, kfwxh, kfewm } = res.data;
      this.wenhou = wenhou;
      this.bgimage = bgimage;
      this.nopic = nopic;
      this.bgadurl = bgadurl;
      this.copys = copys;
      Taro.setStorageSync('kfwxh', kfwxh);
      Taro.setStorageSync('kfewm', kfewm);
    });
    this.callApi(gsid);
    this.$reguser('', function () {
      //app.loadding();
      that.$getuserbd(function (data) {
        console.log(data, '信息.............');
        // that.userinfo = data.data;
        let bd = data.data.bd;
        Taro.setStorageSync('bd', bd);
      });
    });
    // this.$store.dispatch('binding/binding')
    //微信状态判断
    // Taro.checkSession({
    //   success: function () {},
    //   fail: function () {
    //     console.log('找不到sisstion');
    //   },
    // });
  },
  mounted() {},
  onShareAppMessage(res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target);
    }
    return {
      title: '薪薪员工',
      path: '/pages/index/index',
      success: function (res) {
        // 转发成功
      },
      fail: function (res) {
        // 转发失败
      },
    };
  },
  onShareTimeline() {},
  onPullDownRefresh() {
    Taro.showToast({
      title: '正在刷新数据...',
      icon: 'loading',
      duration: 2000,
    });
    this.callApi(59);
    // this.setData({fabus:[]});//先清空数据
    // this.loadIndex();//再重新加载数据
    Taro.stopPullDownRefresh(); //停止刷新操作
  },
};
</script>

<style>
/**index.wxss**/
.main {
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.index-hzimg {
  width: 30.5%;
  float: left;
  height: 160px;
  margin: 5px 1%;
}
.hidden {
  display: none;
}
.adurl {
  position: absolute;
  background-color: rgba(126, 75, 75, 0);
  width: 100%;
  height: 350px;
  top: 10px;
  right: 0;
  z-index: 333333;
}
.v {
  width: 50px;
  height: 40px;
  align-items: center;
}
.xm {
  width: 50px;
  height: 50px;
  z-index: 33;
}

/*客服弹层*/
.isRuleShow {
  /* display: block;*/
  display: flex;
}
.isRuleHide {
  display: none;
}
.ruleZhezhao {
  height: 100%;
  width: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.9);
  bottom: 0;
  left: 0;
  z-index: 999;
  align-items: center;
}
.ruleZhezhaoContent {
  padding: 0;
  width: 80%;
  margin: 0 auto;
  justify-content: center;
  font-size: 35px;
  color: #333;
  background-color: #fff;
  border-radius: 25px;
  position: relative;
}
.ruleZhezhaoContent text {
  align-items: center;
}

.ruleHide {
  height: 60px !important;
  width: 60px !important;
  z-index: 10000;
  margin: 0 auto;
  margin-bottom: -120px;
  margin-left: 269px;
}

.tel {
  height: 50px !important;
  width: 50px !important;
  z-index: 10000;
  align-items: center;
}

.kfbg {
  width: 100%;
  height: 360px;
  border-radius: 25px 25px 0 0;
  padding-top: 0px;
  background-size: 100%;
  /* border-radius: 10px;*/
  position: relative;
  margin-bottom: 60px;
}
</style>